<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 30px">
      <el-col :span="6">
        <div class="headerDiv">
          <p class="moneytitle" style="margin-bottom: 10px">
            {{ typeStyle == 0 ? "订单金额" : "售票量" }}
          </p>
          <p>
            <span v-if="typeStyle == 0" class="moneyStyle">{{
              headerData.orderPrice ? headerData.orderPrice : 0
            }}</span>
            <span v-if="typeStyle == 1" class="moneyStyle">{{
              headerData.ticketSales ? headerData.ticketSales : 0
            }}</span>
          </p>
          <div class="statusMessage">
            <span style="padding-right: 10px">环比</span>
            <div class="imgDiv">
              <img
                v-if="headerData.orderStatusXB == '同比上涨' || headerData.orderStatusXB == '持平' || headerData.ticketSalesStatus == '同比上涨' || headerData.ticketSalesStatus == '持平'"
                class="divImg"
                src="../../image/top.png"
                alt=""
              />
              <img
                v-if="headerData.orderStatusXB == '同比下降' || headerData.ticketSalesStatus == '同比下降'"
                class="divImg"
                src="../../image/down.png"
                alt=""
              />
            </div>
            <span v-if="typeStyle == 0" class="status">{{
              headerData.orderPriceBL ? headerData.orderPriceBL : 0
            }}</span>
            <span v-if="typeStyle == 1" class="status">{{
              headerData.ticketSalesBL ? headerData.ticketSalesBL : 0
            }}</span>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="headerDiv">
          <p class="moneytitle" style="margin-bottom: 10px">
            {{ typeStyle == 0 ? "总收益" : "退票量" }}
          </p>
          <p>
            <span v-if="typeStyle == 0" class="moneyStyle">{{
              headerData.totalSY ? headerData.totalSY : 0
            }}</span>
            <span v-if="typeStyle == 1" class="moneyStyle">{{
              headerData.refundSales ? headerData.refundSales : 0
            }}</span>
          </p>
          <div class="statusMessage">
            <span style="padding-right: 10px">环比</span>
            <div class="imgDiv">
              <img
                v-if="headerData.totalSYBLStatus == '同比上涨' || headerData.totalSYBLStatus == '持平' || headerData.refundSalesStatus == '同比上涨' || headerData.refundSalesStatus == '持平'"
                class="divImg"
                src="../../image/top.png"
                alt=""
              />
              <img
                v-if="headerData.totalSYBLStatus == '同比下降' || headerData.refundSalesStatus == '同比下降'"
                class="divImg"
                src="../../image/down.png"
                alt=""
              />
            </div>
            <span v-if="typeStyle == 0" class="status">{{
              headerData.totalSYBL ? headerData.totalSYBL : 0
            }}</span>
            <span v-if="typeStyle == 1" class="status">{{
              headerData.refundSalesBL ? headerData.refundSalesBL : 0
            }}</span>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="headerDiv">
          <p class="moneytitle" style="margin-bottom: 10px">{{typeStyle == 0 ? '服务费收益' : '售票额（元）'}}</p>
          <p>
            <span v-if="typeStyle == 0" class="moneyStyle">{{
              headerData.fuwuSY ? headerData.fuwuSY : 0
            }}</span>
            <span v-if="typeStyle == 1" class="moneyStyle">{{
              headerData.totalAmount ? headerData.totalAmount : 0
            }}</span>
          </p>
          <div class="statusMessage">
            <span style="padding-right: 10px">环比</span>
            <div class="imgDiv">
              <img
                v-if="headerData.fuwuSYBLStatus == '同比上涨' || headerData.fuwuSYBLStatus == '持平' || headerData.totalAmountStatus == '同比上涨' || headerData.totalAmountStatus == '持平'"
                class="divImg"
                src="../../image/top.png"
                alt=""
              />
              <img
                v-if="headerData.fuwuSYBLStatus == '同比下降' || headerData.totalAmountStatus == '同比下降'"
                class="divImg"
                src="../../image/down.png"
                alt=""
              />
            </div>
            <span v-if="typeStyle == 0" class="status">{{
              headerData.fuwuSYBL ? headerData.fuwuSYBL : 0
            }}</span>
            <span v-if="typeStyle == 1" class="status">{{
              headerData.totalAmountBL ? headerData.totalAmountBL : 0
            }}</span>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="headerDiv">
          <p class="moneytitle" style="margin-bottom: 10px">{{typeStyle == 0 ? '保险收益' : '购保险人数占比'}}</p>
          <p>
            <span class="moneyStyle">{{typeStyle == 0 ? '0' : headerData.proportionOfInsuranceBuyers}}</span>
          </p>
          <div class="statusMessage">
            <span style="padding-right: 10px">环比</span>
            <div class="imgDiv">
              <img
                v-if="headerData.totalSYBLStatus == '同比上涨' || headerData.insureStatus == '同比上涨' || headerData.totalSYBLStatus == '持平' || headerData.insureStatus == '持平'"
                class="divImg"
                src="../../image/top.png"
                alt=""
              />
              <img
                v-if="headerData.totalSYBLStatus == '同比下降' || headerData.insureStatus == '同比下降'"
                class="divImg"
                src="../../image/down.png"
                alt=""
              />
            </div>
            <span class="status">{{typeStyle == 0 ? '0%' : headerData.insureBL}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  watch: {
    headerData(a, b) {
      this.headerData = a;
    },

  },
  props: ["headerData", "typeStyle"],

  data() {
    return {
      // 首模块
      selectDay: [],
    };
  },
  mounted() {
  },
  methods: {},
};
</script>

<style scoped>
.header {
  width: 100%;
}
.imgDiv {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: 13px;
}
.divImg {
  width: 100%;
  height: 100%;
}
.headerDiv {
  border: 1px solid rgba(233, 233, 233, 1);
  padding-left: 10%;
  padding-top: 20px;
  width: 95%;
  height: 155px;
  margin: 0 auto;
}
.headerDiv p {
  margin: 0;
  padding: 0;
}
.moneytitle,
.statusMessage {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.427450980392157);
}

.status {
  color: rgba(0, 0, 0, 0.647058823529412);
}
.moneyStyle {
  font-size: 1.9rem;
}
</style>